<template>
  <div :class="[dialogShow ? 'page_body dialog_show' : 'page_body']">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="answer_index_body">
      <div class="answer_index_top">
        <img
          class="answer_index_top_img"
          src="../../assets/image/answer_top01.png"
        />
      </div>
      <div class="answer_index_status_box" v-if="isAnswer == 0">
        <img
          class="answer_index_status_box_img unanswered_item"
          src="../../assets/image/answer_bg01.png"
        />
        <div class="answer_index_status_box_title">您需要进行上岗认证</div>
        <div class="answer_index_status_box_btn" @click="toAnswerDetail()">
          开始认证
        </div>
      </div>
      <div class="answer_index_status_box" v-else>
        <img
          class="answer_index_status_box_img"
          src="../../assets/image/answer_status01.png"
          v-if="passStatus == 1 && showScore == 1"
        />
        <img
          class="answer_index_status_box_img"
          src="../../assets/image/answer_status02.png"
          v-if="passStatus == 2 && showScore == 1"
        />
        <img
          class="answer_index_status_box_img"
          src="../../assets/image/answer_status03.png"
          v-if="showScore == 2"
        />
        <div
          class="answer_index_status_box_title"
          v-if="passStatus == 1 && showScore == 1"
        >
          您的认证已通过！
        </div>
        <div
          class="answer_index_status_box_title"
          v-if="passStatus == 2 && showScore == 1"
        >
          您的认证未通过
        </div>
        <div class="answer_index_status_box_title" v-if="showScore == 2">
          等待结果公布
        </div>
        <div
          class="answer_index_status_box_btn"
          @click="toAnswerView()"
          v-if="showScore == 1"
        >
          查看试卷
        </div>
      </div>
    </div>
    <HomeFooter :activeKey="activeKey" :systemKey="systemKey"></HomeFooter>
  </div>
</template>
<style src="../../assets/css/answer/refereeAnswerIndex.css" scoped></style>

<script>
import HomeFooter from "@/components/homeFooter.vue";
import HomeTop from "@/components/homeTop.vue";
import { Indicator, Toast } from "mint-ui";

export default {
  name: "RefereeAnswerIndex",
  components: {
    HomeFooter,
    HomeTop,
  },
  data() {
    return {
      activeKey: 2,
      systemKey: 2,
      dialogShow: false, // 弹框显示
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "上岗认证",
      isAnswer: 0, // 是否完成答题 0：否 1：是
      answerId: "", // 答题记录id
      showScore: 0, // 是否显示考试结果 1：是 2：否
      passStatus: 0, // 考试结果 1：通过 2：未通过
    };
  },
  created: function () {
    this.checkQuestionExamFn();
  },
  methods: {
    // 查询用户答题状态
    checkQuestionExamFn: function () {
      let that = this;
      let url = "/mobile/checkQuestionExam";
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.isAnswer = response.answer_status;
            that.answerId = response.ques_answer_id;
            that.showScore = response.show_score;
            that.passStatus = response.pass_status;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 前往答题
    toAnswerDetail: function () {
      this.$router.push({
        name: "RefereeAnswer",
      });
    },
    // 查看答卷
    toAnswerView: function () {
      this.$router.push({
        name: "RefereeAnswer",
        query: {
          id: this.answerId,
        },
      });
    },
  },
};
</script>
